<!-- subpkg_consult/room/components/message-info.vue -->
<script lang="ts" setup>
  // 接收外部传入的数据
  import { useUserStore } from '@/stores/user'
  import type { MsgItem } from '@/types/room'
  import dayjs from 'dayjs'
  const formatTime = (time: string | number) => {
    return dayjs(time).format('HH:mm')
  }
  defineProps<{
    info: MsgItem
    type: number
  }>()
  const store = useUserStore()
</script>

<template>
  <!-- 文字/图片消息 -->
  <view class="message-item" :class="{ reverse: info.from === store.userId }">
    <image class="room-avatar" :src="info.fromAvatar" />
    <view class="room-message">
      <view class="time">{{ formatTime(info.createTime) }}</view>
      <view class="text" v-if="type === 1">
        {{ info.msg?.content }}
      </view>
      <image v-if="type === 4" class="image" :src="info.msg?.picture?.url" mode="widthFix" />
    </view>
  </view>
</template>

<style lang="scss">
  .message-item {
    display: flex;
    align-self: flex-start;
    margin-top: 60rpx;

    .room-avatar {
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;
    }

    .room-message {
      margin-left: 20rpx;
    }

    .time {
      font-size: 26rpx;
      color: #979797;
    }

    .image {
      max-width: 420rpx;
      margin-top: 10rpx;
    }

    .text {
      max-width: 420rpx; // 聊天内容最大宽度
      line-height: 1.75; // 行高
      padding: 30rpx 40rpx; // 内边距
      margin-top: 16rpx; // 与上一条消息之间的距离
      border-radius: 20rpx; // 圆角
      font-size: 30rpx; // 文字大小
      color: #3c3e42; // 文字颜色
      background-color: #fff; // 背景色
      position: relative; // 绝对定位
      word-wrap: break-word; /* 允许长单词或 URL 地址换行到下一行 */
      word-break: break-all; /* 在任何字符处断行 */
      white-space: normal; /* 默认值，允许文本换行 */

      &::after {
        content: ''; // 内容
        position: absolute; // 绝对定位
        top: 0;
        left: -25rpx;
        width: 26rpx;
        height: 52rpx;
        background-image: url(https://consult-patient.oss-cn-hangzhou.aliyuncs.com/static/images/im-arrow-1.png);
        background-size: contain;
      }
    }
    &.reverse {
      flex-direction: row-reverse;
      align-self: flex-end;

      .room-message {
        margin-left: 0;
        margin-right: 20rpx;
      }

      .time {
        text-align: right;
      }

      .text {
        background-color: #16c2a3;
        color: #fff;

        &::after {
          left: auto;
          right: -25rpx;
          background-image: url(https://consult-patient.oss-cn-hangzhou.aliyuncs.com/static/images/im-arrow-2.png);
        }
      }
    }
  }
</style>
